<template>
  <div class="product-add-container">
    <h2 class="title">商品添加</h2>
    <div class="underline"></div>
    
    <div class="form-container">
      <div class="form-item" v-for="field in fields" :key="field.key">
        <span class="label">{{ field.label }}：</span>
        <input 
          v-model="formData[field.key]" 
          :type="field.type || 'text'" 
          class="input-field"
          :placeholder="'请输入' + field.label"
        >
      </div>
    </div>
    
    <div class="button-group">
      <button class="add-btn" @click="submitForm">添加商品</button>
      <button class="reset-btn" @click="resetForm">重置</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

// 表单字段配置
const fields = [
  { key: 'id', label: '商品ID', type: 'number' },
  { key: 'pname', label: '商品名称' },
  { key: 'imgurl', label: '图片URL' },
  { key: 'oldprice', label: '原价', type: 'number' },
  { key: 'newprice', label: '现价', type: 'number' },
  { key: 'color', label: '颜色' },
  { key: 'size', label: '尺寸' },
  { key: 'count', label: '库存数量', type: 'number' },
  { key: 'status', label: '状态', type: 'number' },
  { key: 'description', label: '商品描述' },
  { key: 'category_id', label: '分类ID', type: 'number' }
];

// 表单数据
const formData = ref({
  id: '',
  pname: '',
  imgurl: '',
  oldprice: '',
  newprice: '',
  color: '',
  size: '',
  count: '',
  status: '',
  description: '',
  category_id: ''
});

// 提交表单
const submitForm = async () => {
  try {
    // 验证必填字段
    if (!formData.value.pname || !formData.value.newprice) {
      alert('请填写商品名称和现价');
      return;
    }
    
    // 发送请求到后端
    const response = await axios.post('http://your-api-endpoint/product', formData.value);
    
    if (response.data.code === 200) {
      alert('商品添加成功');
      resetForm();
    } else {
      alert('商品添加失败: ' + response.data.message);
    }
  } catch (error) {
    console.error('添加商品出错:', error);
    alert('添加商品时出错');
  }
};

// 重置表单
const resetForm = () => {
  formData.value = {
    id: '',
    pname: '',
    imgurl: '',
    oldprice: '',
    newprice: '',
    color: '',
    size: '',
    count: '',
    status: '',
    description: '',
    category_id: ''
  };
};
</script>

<style lang="scss" scoped>
.product-add-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: #333;
  margin-bottom: 10px;
}

.underline {
  height: 2px;
  background-color: #1890ff;
  width: 100px;
  margin: 0 auto 20px;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-item {
  display: flex;
  align-items: center;
}

.label {
  width: 120px;
  text-align: right;
  padding-right: 15px;
  color: #666;
  font-size: 14px;
}

.input-field {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
  
  &:focus {
    border-color: #1890ff;
    outline: none;
  }
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.add-btn, .reset-btn {
  padding: 10px 25px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.add-btn {
  background-color: #1890ff;
  color: white;
  
  &:hover {
    background-color: #40a9ff;
  }
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666;
  
  &:hover {
    background-color: #e6e6e6;
  }
}
</style>
